<template>
    <el-dialog title="提示" :model-value="modelValue" width="480px" custom-class="cancel-close" @closed="handleClose">
        <h3 class="cancel-title">您勾选的方案中包含无法取消的方案，请重新选择；</h3>
        <div class="cancel-box">
            <p class="cancel-box-des">可取消符合以下条件的方案：</p>
            <ul class="cancel-box-list">
                <li>1.草稿状态的方案；</li>
                <li>2.锁定点位状态的方案；</li>
                <li>3.确认投放状态，且还未到投放开始日期的方案；</li>
            </ul>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" :loading="submitLoading" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

const emits = defineEmits<{(e: 'update:modelValue', visible: boolean): void; (e: 'success'): void }>();
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
});
const submitLoading = ref(false);
const handleClose = () => {
    emits('update:modelValue', false);
};

const submit = async () => {
    handleClose();
    emits('success');
};
</script>

<style lang="scss" scoped>
.cancel-close {
    .cancel-title {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        letter-spacing: 0;
        margin-bottom: 20px;
    }
    .cancel-box {
        height: 100%;
        background: rgba(241, 90, 74, 0.05);
        border-radius: 4px;
        padding: 16px;
        line-height: 24px;
    }
    .cancel-box-des {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        letter-spacing: 0;
        margin: 0;
    }
    .cancel-box-list {
        color: #333333;
        font-size: 14px;
        font-weight: 500;
    }
}
</style>
